<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/style.css}" />
    <script type="text/javascript" th:src="@{/Hospital/Js/jquery.js}"></script>
    <!--<script type="text/javascript" th:src="../Js/jquery.sorted.js"></script>-->
    <script type="text/javascript" th:src="@{/Hospital/Js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/ckform.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/common.js}"></script>
    <script th:src="@{/Hospital/layer/layer.js}"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form method="post" class="definewidth m20" >
<table class="table table-bordered table-hover definewidth m10">
    <tr>
        <td width="10%" class="tableleft">角色名称</td>
        <td>
            <input type="text" name="title" id="title"/></td>
    </tr>
    <tr>
        <td class="tableleft">状态</td>
        <td>
            <input type="radio" id="sta1" name="status" value="0" checked /> 启用
           <input type="radio" id="sta2" name="status" value="1"  /> 禁用
        </td>
    </tr>
    <tr>
        <td class="tableleft">权限</td>
        <td>
            <div id="tbody">
                <!--展示数据-->
            </div>

        </td>
    </tr>
    <tr>
        <td class="tableleft"></td>
        <td>
            <button class="btn btn-primary" id="update" type="button">更新</button> &nbsp;&nbsp;
            <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
        </td>
    </tr>
</table>
</form>
</body>
</html>
<script>
    $(function () {
        $(':checkbox[name="group[]"]').click(function () {
            $(':checkbox', $(this).closest('li')).prop('checked', this.checked);
        });

		$('#backid').click(function(){
				window.location.href="index";
		 });

    });

    //获取菜单资源数据，进页面默认执行
    function getMenuList(){
        $.get("menuList",null,function (data){
            let menuList = data.list;
            //展示内容
            let itemList = "";
            menuList.forEach(function (menu,index){
                let id = menu.m_id;
                let name = menu.m_chineseName;

                let item = '<ul>' +
                    '<label class="checkbox inline">' +
                    '<input type="checkbox" name="group" value="'+id+'"/>'+name+''+
                    '</label>' +
                    '</ul>';

                itemList +=item;
            })
            //放入标签中展示
            $("#tbody").html(itemList);
        })
    }


    //解析url
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }

    //进页面默认执行
    function getData(){

        //获取url
        let url = document.location.toString();
        let id = url.GetValue("id");

        $.post("getInfoById", {id:id},function (data){
            let role = data.obj;
            let mids = data.list;
            let roleName = role.r_name;
            let roleState = role.r_state;

            //填充角色信息数据
            $("input[name='title']").val(roleName);
            //选择框需要判断选中,启用状态
            if (roleState === 0){
                $("#sta1").attr("checked","checked");
            }else {
                $("#sta2").attr("checked","checked");
            }

            //角色的资源选择状态信息选中
            mids.forEach(function (id,index){
                //记住此方法，很好用
                $("input[name='group'][value='" + id + "']").prop("checked", true);
            })

            let roleName1 = $("#title").val();
            //角色唯一性验证，鼠标移除输入框触发函数
            $("#title").blur(function (){
                let roleName = $("#title").val();
                if (roleName1 !== roleName){
                    $.get("compare",{roleName:roleName},function (data){
                        //将服务器回复的结果进行显示
                        layer.msg(data.msg);
                    })
                }
            })
        })
    }

    //点击进行更新
    $(function () {
        $('#update').click(function(){

            //获取输入框最终数据
            //获取url
            let url = document.location.toString();
            let roleId = url.GetValue("id");
            let roleName = $("input[name='title']").val();
            let roleStatus = $("input:radio:checked").val();

            //资源菜单的ids
            let allMenu = document.getElementsByName("group");
            let ids = [];

            //遍历元素获取最终选中的资源
            allMenu.forEach(function (menu,index){
                if (menu.checked){
                    ids.push(menu.value);
                }
            })
            //很关键，对数据序列化，传给服务端
            let ids1 = JSON.stringify(ids);

            if(confirm("确认更新?")){
                //前端确认添加后，后端进行数据处理
                //先使用layer,弹出load（提示加载中...）
                const windowId = layer.load();//获取加载框
                $.post("update",{roleId:roleId,roleName:roleName,roleStatus:roleStatus,ids:ids1},function (data){
                    //关闭load窗口
                    layer.close(windowId);
                    //将服务器回复的结果进行显示
                    layer.msg(data.msg);
                    if (data.status === 1){
                        window.location.href="index";
                    }

                })

            }
        });
    });

</script>
<script>
    //默认加载方法
    $(function (){
        getMenuList();
        getData();

    })

</script>